<template>
	<view>
		<view class="padding-sm">
			<view scroll-x class="bg-white nav" style="line-height: 48upx;width: 100%;height: 48upx;">
				<view class="cu-item tabnew" :class="sex=='male'?'light bg-cyan':''" @click="toSex('male')" style="line-height: 48upx;height: 48upx;">
					男频
				</view>
				<view class="cu-item tabnew" :class="sex=='female'?'light bg-cyan':''" @click="toSex('female')" style="line-height: 48upx;height: 48upx;">
					女频
				</view>
			</view>
			<scroll-view scroll-x class="bg-white nav margin-top-sm" style="line-height: 48upx;width: 100%;height: 48upx;" >
				<view class="cu-item tabnew" v-for="(item,index) in list" :key="index" :class="index==TabCar1?'light bg-cyan':''" :data-major="index" @click="toMajor" style="line-height: 48upx;height: 48upx;">
					{{item.major}}
				</view>
			</scroll-view>
			<scroll-view scroll-x class="bg-white nav margin-top-sm" style="line-height: 48upx;width: 100%;height: 48upx;" >
				<view class="cu-item tabnew" :class="TabCar2 == -1?'light bg-cyan':''" data-mins="-1" @click="toMins" style="line-height: 48upx;height: 48upx;" >
					全部
				</view>
				<view class="cu-item tabnew" v-for="(value,key) in minslist" :key="key" :class="key==TabCar2?'light bg-cyan':''" :data-mins="key" @click="toMins" style="line-height: 48upx;height: 48upx;">
					{{value}}
				</view>
			</scroll-view>
			<scroll-view scroll-x class="bg-white nav margin-top-sm" style="line-height: 48upx;width: 100%;height: 48upx;" >
				<view class="cu-item tabnew" v-for="(value,key) in limit" :key="key" :class="key==TabCar3?'light bg-cyan':''" @click="toLimit(key)" style="line-height: 48upx;height: 48upx;">
					{{value}}
				</view>
			</scroll-view>
			
		</view>
		
		<view class="flex justify-between margin-lr-xl solid-bottom align-center" style="height: 220upx;padding:30upx 0upx" v-for="(item,index) in booklist" :key="index" @click="ToBook(item._id)">
			<image :src="item.cover" mode="widthFix" style="width: 18%;" class="shadow"></image>
			<view style="width: 75%;padding:10upx 0" >
				<view class="flex justify-between">
					<view class="text-bold text-lg">{{item.title}}</view>
					<view class="text-gray icon-more" style="font-size: 36upx;line-height: 60upx;"></view>
				</view>
				<view class="text-sm text-gray text-cut" style="line-height: 45upx;">{{item.author}} · {{item.minorCate}}</view>
				<view class="text-sm text-gray text-cut" style="line-height: 45upx;">{{item.lastChapter}}</view>
			</view>
		</view>
		
		<view v-if="istop == true" class="padding-sm bg-gradual-blue round icon-top" style="position: fixed; bottom:80px;right: 20px;font-size: 36upx;" @click="Top"></view>
		
		<!-- 底边栏 -->
		<view style="height: 100upx;"></view>
		<bottom-bar TabCar="2" ></bottom-bar>
	</view>
</template>

<script>
	var that;
	var major = '玄幻';
	var mins = '';
	var type = 'hot';
	var page = 0;
	export default {
		data() {
			return {
				list : [],
				booklist : [],
				scrollleft : 0,
				minslist : [],
				sex : 'male',
				TabCar1 : 0,
				TabCar2 : -1,
				TabCar3 : 'hot',
				istop : false,
				limit : {
					'hot' : '热门',
					'reputation' : '好评',
					'over' : '完结',
				} 
			}
		},
		
		onLoad() {
			that = this
			that.util.get('VueCatalogue',{sex : 'male'})
			.then(res=>{
				that.list = res
				that.minslist = res[0].mins
				that.bookList(0)
			})
		},
		
		onReachBottom() {
			that = this
			page++
			that.bookList(page)
		},
		
		onPageScroll(e){
			if (e.scrollTop > 500) {
				that.istop = true
			}else{
				that.istop = false
			}
		},
		
		onReady() {
			uni.hideTabBar()
		},
		
		
		methods: {
			PageBack(){
				uni.navigateBack({
						delta: 1
				});
			},
			
			ToBook(e){
				uni.navigateTo({
					url: '/pages/book/book?id='+e
				});
			},
			
			toSex(e){
				that.sex = e
				that.TabCar1 = 0
				that.TabCar2 = -1
				mins = ''
				that.util.request({
					'url' : 'VueCatalogue',
					data : {
						sex : e
					},
					showLoading:false,
					success:function(res){
						that.list = res.data.data
						that.minslist = res.data.data[0].mins
						major = res.data.data[0].major
						that.bookList(0)
					}
				})
			},
			
			toMajor(e){
				var moj = e.currentTarget.dataset.major
				that.TabCar1 = moj
				that.TabCar2 = -1
				major = that.list[moj].major
				that.minslist = that.list[moj].mins
				mins = ''
				that.bookList(0)
			},
			
			
			toMins(e){
				var number = e.currentTarget.dataset.mins
				if (number >= 0) {
					mins = that.minslist[number]
				} else{
					mins = ''
				}
				that.TabCar2 = number
				that.bookList(0)
			},
			
			toLimit(e){
				that.TabCar3 = e
				type = e
				that.bookList(0)
			},
			
			Top(){
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			
			bookList(e){
				var start = e*10
				that.util.get('VueCatBookes',{
						gender : that.sex,
						type : type,
						major : major,
						minor : mins,
						start : start,
						limit : 10
				})
				.then(res=>{
					var data = res.books
					if (data.length <= 0 || data == []) {
						uni.showToast({
							icon: 'none',
							title: '没有更多了',
							duration: 1500
						});
						return false
					}
					if (e > 0) {
						var n_list = JSON.stringify(data).substr(1, JSON.stringify(data).length-1)
						var o_list = JSON.stringify(that.booklist).substr(0, JSON.stringify(that.booklist).length - 1)
						var newdata = o_list+','+n_list
						var list = JSON.parse(newdata)
						that.booklist = list
					} else{
						that.booklist = data
					}
				})
			},	
		}
	}
</script>

<style>
	page{background-color:#ffffff;}
	
	.tabnew {
		line-height: 48upx;height: 48upx;
	}
</style>
